<template>
  <div id="home">
    <scroll
      @pullingUp="pullingUp"
      @scroll="handleScroll"
      :probe-type="3"
      ref="scroll"
      class="scroll"
      :pull-up-load="true"
    >
      <tabcontrol ref="tabcontrol" class="tabcontrol">
        <template #center>
          <search></search>
        </template>
        <template #right>
          <message></message>
        </template>
      </tabcontrol>
      <swiper
        :show-indicators="true"
        :height="260"
        class="swiper"
        :swiper-item-list="swiperItemList"
      ></swiper>
      <news class="news"></news>
    </scroll>
  </div>
</template>

<script lang="js">
import {defineComponent,computed,watchEffect, onMounted, reactive, ref} from 'vue'
import { useStore } from 'vuex'
import Scroll from '@/components/scroll/scroll.vue'
import Swiper from '@/components/swiper/swiper.vue'
import Tabcontrol from '@/components/tabcontrol/tabcontrol.vue'
import Search from './child/search/search.vue'
import Message from './child/message/message.vue'
import News from './child/news/news.vue'
import emitter from '@/utils/eventbus';

export default defineComponent({
  props: {

  },
  components: {
    Scroll,
    Swiper,
    Tabcontrol,
    Search,
    Message,
    News
  },
  setup() {

    const store = useStore()
    const swiperItemList = computed(() => store.state.home.swiperItemList)
    const scroll=ref(null)
    const tabcontrol=ref(null)

      emitter.on("newsLoadFinis", () => {
          console.log('newsLoadFinis刷新');
          scroll.value.refresh()
      });

      emitter.on("tabClickRefresh", () => {
          console.log('tabClickRefresh');
          scroll.value.refresh()
      });

      const handleScroll=(position)=>{}
      let timer=null
      const pullingUp=()=>{
          clearTimeout(timer)
          timer=setTimeout(() => {
             console.log('加载中国');
          }, 5000);
          scroll.value.finishPullUp()
      }
    return {
      swiperItemList,
      scroll,
      tabcontrol,
      handleScroll,
      pullingUp

    }

  }
})
</script>

<style scoped lang="less">
#home {
  background-color: #f5f5f5;
  min-height: 100vh;
  position: relative;
  .scroll {
    overflow: hidden;
    position: absolute;
    top: 0px;
    bottom: 16vw;
    left: 0;
    right: 0;
    .swiper {
      height: 260px;
    }
    .news {
      padding-top: 4vw;
    }
    .tabcontrol {
      position: absolute;
      top: 2vh;
      width: 100vw;
      z-index: 99;

      .message {
        color: white;
      }
    }
    .tabcontrolCurrent {
      top: 0 !important;
      background-color: rgba(255, 255, 255, 0.9);
      &:deep(.van-search) {
        background: rgba(255, 255, 255, 0.4) !important;
      }
    }
  }
}
</style>
